import {Layout} from '../../src/Layout';
export default Layout;

import {Slider} from '@react-spectrum/s2';
import docs from 'docs:@react-spectrum/s2';

export const tags = ['range input', 'track', 'scrubber'];
export const description = 'Allows a user to select a numeric value within a range.';

# Slider

<PageDescription>{docs.exports.Slider.description}</PageDescription>

<VisualExample
  component={Slider}
  docs={docs.exports.Slider}
  links={docs.links}
  props={['label', 'trackStyle', 'thumbStyle', 'size', 'labelPosition', 'formatOptions', 'contextualHelp', 'isEmphasized', 'isDisabled']}
  initialProps={{label: 'Cookies', defaultValue: 30}}
  type="s2"
  importSource="@react-spectrum/s2" />

## Value

Use the `value` or `defaultValue` prop to set the slider's value. The `onChange` event is called as the user drags, and `onChangeEnd` is called when the thumb is released.

```tsx render
"use client";
import {Slider} from '@react-spectrum/s2';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
import {useState} from 'react';

function Example() {
  let [currentValue, setCurrentValue] = useState(25);
  let [finalValue, setFinalValue] = useState(currentValue);

  return (
    <>
      <Slider
        label="Cookies to buy"
        /*- begin highlight -*/
        value={currentValue}
        onChange={setCurrentValue}
        onChangeEnd={setFinalValue} />
        {/*- end highlight -*/}
      <pre className={style({font: 'body'})}>
        onChange value: {currentValue}{'\n'}
        onChangeEnd value: {finalValue}
      </pre>
    </>
  );
}
```

### Value scale

By default, slider values are percentages between 0 and 100. Use the `minValue`, `maxValue`, and `step` props to set the allowed values. Steps are calculated starting from the minimum. For example, if `minValue={2}`, and `step={3}`, the valid step values would be 2, 5, 8, 11, etc.

<VisualExample
  component={Slider}
  docs={docs.exports.Slider}
  links={docs.links}
  type="s2"
  props={['minValue', 'maxValue', 'step', 'fillOffset']}
  initialProps={{
    label: 'Amount',
    minValue: 0,
    maxValue: 150,
    defaultValue: 50,
    step: 5,
    fillOffset: 75
  }} />

## API

<PropTable component={docs.exports.Slider} links={docs.links} />
